	<div style="padding-top: 15px; padding-bottom: 15px;">
		<div class="container">
			<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
			<h2>Raycaster</h2>
			<p>A raycaster (or raypicking) is used to interact with 3D objects from the camera point of view. The raycaster achieves this by casting a line that follows the camera frustum checking for collisions with 3D meshes along the way.</p>

			<img src="assets/learn/basics/raycaster/raycasting.png" class="img-normal"/>

			<p>In nunuStudio every scene has a raycaster by default using the first camera to render. The raycaster attached to the scene is updated everyframe with the mouse coordinates.</p>
			<p>The code bellow can be used to test the raycaster object, we start by getting the red and blue materials from the program. On the update method we use the raycaster intersectObjects method to check if the mouse is on top of some object.</p>
			<p>After we get the list of intersected objectes we loop though them and change their material depending on which mouse button is currently pressed.</p>

			<pre><code class="hljs javascript">var red, blue;

function initialize()
{{'{'}}
	red = program.getMaterialByName("red");
	blue = program.getMaterialByName("blue");
{{'}'}}

function update()
{{'{'}}
	//Check interseted objects
	var intersects = scene.raycaster.intersectObjects(scene.children);

	//Intersections list contains object, point of intersection, distance, uv and face
	for(var i = 0; i < intersects.length; i++)
	{{'{'}}
		if(Mouse.buttonPressed(Mouse.LEFT))
		{{'{'}}
			intersects[i].object.material = red;
		{{'}'}}
		else if(Mouse.buttonPressed(Mouse.RIGHT))
		{{'{'}}
			intersects[i].object.material = blue;
		{{'}'}}
	{{'}'}}
{{'}'}}
</code></pre>

		<p>The intersectObjects method returns a list of intersection objects, each intersection object has the following attributes. To raycast a single object is also possible to use the intersectObject method that only returns a single intersection object.</p>
		<ul>
			<li><p>distance – distance between the origin of the ray and the intersection</p></li>
			<li><p>point – point of intersection, in world coordinates</p></li>
			<li><p>face – intersected face</p></li>
			<li><p>faceIndex – index of the intersected face</p></li>
			<li><p>indices – indices of vertices comprising the intersected face</p></li>
			<li><p>object – the intersected object</p></li>
			<li><p>uv - U,V coordinates at point of intersection</p></li>
		</ul>

		<p>Intersections are sorted by distance, the first object in the intesection list is always the one closer to the camera. If everything worked as expected you should have something similar to the demo bellow. Use the left mouse button to paint the cubes blue and the right mouse button to paint them red.</p>

		<app-viewer fname="assets/learn/basics/raycaster/raycaster.nsp"></app-viewer>

		<p>A simpler way to use the raycaster is to declare a onMouseOver(intersects) method in the script. This method is automatically called when the mouse is over one of the children of that script.</p>
		<pre><code class="hljs javascript">function onMouseOver(intersects)
{{'{'}}
	console.log(intersects);
{{'}'}}
</code></pre>

	</div>
</div>
